<template>
    <div class="echart-chart">
        <div class="inside">
            <header><i class="el-icon-location-outline"></i> 本区域预估租金回报</header>
            <div class="chartBox clearfix">
                <article v-show="!chartNoDataShow">
                    <radioGroup ref="radioGroup" @radioChange="filterYearChange"></radioGroup>
                    <p>图表上的圆形标注点为历史数据最大值及最小值</p>
                    <div class="chart-div">
                        <LargeScaleAreaCharts
                            :domID="'forecastRentReturn-chart'"
                            :chartsData="chartsData"
                            :seriesName="'本区域预估租金回报'"
                            :isMultiply100="false"
                            :isLoading="isLoading">
                        </LargeScaleAreaCharts>
                    </div>
                </article>
                <h4 ref="forecastRentReturn_chart_NoData" v-show="chartNoDataShow"></h4>
            </div>
            <p v-show="false">{{getzipcode}}</p>
        </div>
    </div>
</template>

<script>
    import LargeScaleAreaCharts from '@/components/wxMiniProgramCharts/LargeScaleAreaCharts.vue';//公共组件——%大数据量面积折线图
    import { radioGroup } from '@/mixin/echarts_radio';//公共mixin混入——radio-group组件

    export default {
        mixins: [radioGroup],
        data() {
            return {
                chartNoDataShow: false, //判断是否有无数据
                chartsData: null,//图表所需数据
                isLoading: false,//判断图表是否loading

            }
        },
        computed: {
            //房源详情页图表使用——本房源所在邮zipcode
            getzipcode() {
                if(this.$store.getters.get_houseDetailsZipcode){
                    this.get_forecastRentReturn(3);
                }
                return this.$store.getters.get_houseDetailsZipcode
            }
        },
        created() {
        },
        mounted() {
        },
        methods: {
            //获取本区域预估租金回报数据
            get_forecastRentReturn(filterYearValue) {
                this.$get('/report/rentalyield/' + this.$store.getters.get_houseDetailsZipcode +'?time='+ filterYearValue).then(res => {
                    if (res.status == 0) {
                        if(res.data == null || res.data.length == 0){
                            this.chartNoDataShow = true;
                            this.$refs.forecastRentReturn_chart_NoData.innerText = '暂未查询到数据！';
                        }else{
                            this.chartNoDataShow = false;
                            this.chartsData = res.data;
                        }
                    } else {
                        this.chartNoDataShow = true;
                        this.$refs.forecastRentReturn_chart_NoData.innerText = '暂未查询到数据！';
                    }
                });
            },
            //接收公共mixinradio-group组件的change事件——按年份筛选
            filterYearChange(filterYearValue) {
                this.isLoading = true;
                this.get_forecastRentReturn(filterYearValue);
            },

        },
        components: {
            LargeScaleAreaCharts,//公共组件——%大数据量面积折线图
            radioGroup,//公共mixin混入——radio-group组件

        }
    }
</script>

<style scoped lang="less" type="text/less">
</style>
